<template>
	<view class="">
		<!-- <view class="title_text">
			排行榜
		</view> -->
		<view class="echarts_box">

			<chart2></chart2>
			<chart1></chart1>
			<chart3></chart3>
			<chart4></chart4>
			<chart5></chart5>
			<chart6></chart6>
			<chart7></chart7>
		</view>
		<view class="butnavboxs">
			<view @click="goywsb" class="navchildbox">
				<image class="navimgs" src="/static/homeNav/yjsb2.png" mode=""></image>
				<view class="navtitle">
					业绩上报
				</view>
			</view>

			<view class="navchildbox" @click="handlePage(1)">
				<image class="navimgs" src="/static/homeNav/zxhd.png" mode=""></image>
				<view class="navtitle">
					专项活动
				</view>
			</view>

			<view class="navchildbox" @click="handlePage(2)">
				<image class="navimgs" src="/static/homeNav/cgyx.png" mode=""></image>
				<view class="navtitle">
					常规营销
				</view>
			</view>

			<view class="navchildbox" @click="handlePage(3)">
				<image class="navimgs" src="/static/homeNav/rcwh.png" mode=""></image>
				<view class="navtitle">
					日常维护
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import chart1 from './components/chart1.vue'
	import chart2 from './components/chart2.vue'
	import chart3 from './components/chart3.vue'
	import chart4 from './components/chart4.vue'
	import chart5 from './components/chart5.vue'
	import chart6 from './components/chart6.vue'
	import chart7 from './components/chart7.vue'
	export default {
		components: {
			chart1,
			chart2,
			chart3,
			chart4,
			chart5,
			chart6,
			chart7
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			goywsb() {
				uni.navigateTo({
					url: "/homeNav/rwgl/ywsb?id=2"
				})
			},
			handlePage(index) {
				uni.navigateTo({
					url: '/homeNav/rwgl/active_zxhd?type=' + index
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.butnavboxs {
		width: 100%;
		display: flex;
		flex-flow: row;
		align-items: center;
		position: fixed;
		z-index: 100;
		bottom: 60rpx;
		justify-content: space-around;
		// background-color: #fff;

		.navchildbox {
			width: 140rpx;
			height: 140rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 4px;

			/* 阴影效果：上右浅色，左下深色 */
			box-shadow:
				/* 上阴影 - 浅色 */
				0 -2px 4px rgba(255, 255, 255, 0.7),
				/* 右阴影 - 浅色 */
				3px 0 6px rgba(255, 255, 255, 0.5),
				/* 下阴影 - 深色 */
				0 3px 6px rgba(0, 0, 0, 0.3),
				/* 左阴影 - 深色 */
				-3px 0 6px rgba(0, 0, 0, 0.2);

			.navimgs {
				width: 60rpx;
				height: 60rpx;
				margin: 0rpx auto;
				display: flex;
				margin-top: 20rpx;
			}

			.navtitle {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.share {
		border: 1px solid red;
		padding: 50rpx;
	}

	.echarts_box {
		padding-bottom: 200rpx;
		margin: 24rpx 0;
	}

	.echarts_item {
		width: 94%;
		margin: 0 auto 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}


	.title_text {
		// text-align: center;
		margin: 24rpx;
		color: #063e7d;
	}

	page {
		background: #f2f2f2;
	}
</style>